<template>
  <div class="welcome-container bg-gradient-to-br from-blue-50 to-indigo-100">
    <!-- 顶部欢迎区域 -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-100 mr-4 my-4 p-4">
        <div class="flex items-center justify-between">
          <div class="flex items-center space-x-4">
            <el-avatar 
              :size="80" 
              :src="warpHost(userStore.getAvatar)"
              class="bg-gradient-to-r from-blue-500 to-purple-600"
              icon="User"
            />
            <div>
              <h1 class="text-2xl font-bold text-gray-800 mb-2">
                欢迎回来，<span class="text-blue-600 font-semibold">{{ userStore.getNickname }}</span>
              </h1>
              <p class="text-gray-600 mb-3">
                今天是 {{ currentDate }}，祝您工作愉快！
              </p>
              <div class="flex items-center space-x-4 text-sm text-gray-500">
                <span>🕐 当前时间：{{ currentTime }}</span>
                <span>🌟  {{ appName }} </span>
              </div>
            </div>
          </div>
          <div class="text-right">
            <div class="bg-gradient-to-r from-green-500 to-emerald-500 text-white px-4 py-2 rounded-lg">
              <div class="text-sm opacity-90">系统状态</div>
              <div class="font-semibold">运行正常</div>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { User } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/modules/user'
import { useAppStore } from '@/stores/modules/app'
import { warpHost, env } from '@/support/helper'
const setting = computed(() => useAppStore().getSetting)
// 用户store
const userStore = useUserStore()

// 应用名称
const appName = computed(() => setting.value.dashboard.name || env('VITE_APP_NAME'))

// 当前时间
const currentTime = ref('')
const currentDate = ref('')

// 更新时间
const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleTimeString('zh-CN')
  currentDate.value = now.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
}

let timeInterval: NodeJS.Timeout

onMounted(() => {
  updateTime()
  timeInterval = setInterval(updateTime, 1000)
})

onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval)
  }
})
</script>

<style scoped>
.welcome-container {
  position: relative;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .welcome-container {
    padding: 16px;
  }
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>